<template>
  <div class="goods-list">
    <div class="goods-item" @click="goodsInfo(1)">
        <img src="https://img.alicdn.com/imgextra/i2/1114511827/O1CN011PMo5IKuqAMkdxE_!!1114511827.jpg_430x430q90.jpg" alt="">
        <h1 class="title">【现货速发】华为旗下HONOR/荣耀Magic2滑盖全面屏官网正品超级快充麒麟980官方旗舰店新手机v20</h1>
        <div class="info">
          <p class="price">
            <span class="now">￥899</span>
            <span class="old">￥999</span>
          </p>
          <p class="sell">
            <span>热卖中</span>
            <span>剩50件</span>


          </p>


        </div>
    </div>


    <div class="goods-item">
      <img src="https://img.alicdn.com/imgextra/i2/1114511827/O1CN011PMo5IKuqAMkdxE_!!1114511827.jpg_430x430q90.jpg" alt="">
      <h1 class="title">【现货速发】华为旗下HONOR/荣耀Magic2滑盖全面屏官网正品超级快充麒麟980官方旗舰店新手机v20</h1>
      <div class="info">
        <p class="price">
          <span class="now">￥899</span>
          <span class="old">￥999</span>
        </p>
        <p class="sell">
          <span>热卖中</span>
          <span>剩50件</span>


        </p>


      </div>
    </div>
    <div class="goods-item">
      <img src="https://img.alicdn.com/imgextra/i1/1714128138/O1CN01f5tj2S29zFlWeuj8P_!!1714128138.jpg_430x430q90.jpg" alt="">
      <h1 class="title">小米10 全网通 骁龙865 1亿像素手机5g智能拍照小米官方旗舰店5G手机正品xiaomi</h1>
      <div class="info">
        <p class="price">
          <span class="now">￥899</span>
          <span class="old">￥999</span>
        </p>
        <p class="sell">
          <span>热卖中</span>
          <span>剩50件</span>


        </p>


      </div>
    </div>



    <div class="goods-item">
      <img src="https://img.alicdn.com/imgextra/i2/1114511827/O1CN011PMo5IKuqAMkdxE_!!1114511827.jpg_430x430q90.jpg" alt="">
      <h1 class="title">【现货速发】华为旗下HONOR/荣耀Magic2滑盖全面屏官网正品超级快充麒麟980官方旗舰店新手机v20</h1>
      <div class="info">
        <p class="price">
          <span class="now">￥899</span>
          <span class="old">￥999</span>
        </p>
        <p class="sell">
          <span>热卖中</span>
          <span>剩50件</span>


        </p>


      </div>
    </div>
    <div class="goods-item">
      <img src="https://img.alicdn.com/imgextra/i2/1114511827/O1CN011PMo5IKuqAMkdxE_!!1114511827.jpg_430x430q90.jpg" alt="">
      <h1 class="title">【现货速发】华为旗下HONOR/荣耀Magic2滑盖全面屏官网正品超级快充麒麟980官方旗舰店新手机v20</h1>
      <div class="info">
        <p class="price">
          <span class="now">￥899</span>
          <span class="old">￥999</span>
        </p>
        <p class="sell">
          <span>热卖中</span>
          <span>剩50件</span>


        </p>


      </div>
    </div>
    <div class="goods-item">
      <img src="https://img.alicdn.com/imgextra/i2/1114511827/O1CN011PMo5IKuqAMkdxE_!!1114511827.jpg_430x430q90.jpg" alt="">
      <h1 class="title">【现货速发】华为旗下HONOR/荣耀Magic2滑盖全面屏官网正品超级快充麒麟980官方旗舰店新手机v20</h1>
      <div class="info">
        <p class="price">
          <span class="now">￥899</span>
          <span class="old">￥999</span>
        </p>
        <p class="sell">
          <span>热卖中</span>
          <span>剩50件</span>


        </p>


      </div>
    </div>
  </div>
</template>

<script>
    import { Toast } from 'mint-ui'


    export default {
        data() {
            return {

            }
        },
        created() {

        },
        methods:{
          goodsInfo(id){
            this.$router.push({ name: 'goodsinfo', params: { id}})
          }
        }
    }

</script>
<style lang="scss" scoped>

  .goods-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 7px;

    .goods-item {
      border: 1px solid #ccc;
      width: 49%;
      box-shadow: 0 0 8px #ccc;
      margin: 4px 0;
      padding: 2px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 290px;
      img {
        width: 100%;

      }
      .title {
        font-size: 14px;


      }
      .info {
        background-color: #eee;

        p {
          margin: 0;
          padding: 5px;
        }
        .price {
          .now{
            color: red;
            font-weight: 700;
            font-size: 16px;

          }
          .old {
            text-decoration: line-through;
            font-size: 12px;
            margin-left: 10px;
          }
        }
        .sell {
          display: flex;
          justify-content: space-between;
          font-size: 12px;
        }
      }
    }
  }
</style>
